/**
 * 设备状态
 * Created by KB on 16/8/20.
 */
import {dev} from "../const/dev";
import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from "../components/NoData";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    ajax = lf.utils.ajax,
    api = dev.api,
    apiUrl = api.prefix;

const itemIcon = [
    {
        type: dev.type.light, //灯
        iconType: 'al-icon',
        icon: 'icon-dengpao',
        color: 'blue',
    },
    {
        type: dev.type.socket, //三脚插座
        iconType: 'al-icon',
        icon: 'icon-socket',
        color: 'red',
    },
    {
        type: dev.type.infrared, //红外
        iconType: 'al-icon',
        icon: 'icon-infrared',
        color: 'purple',
    },
    {
        type: dev.type.tv, //电视
        iconType: 'al-icon',
        icon: 'icon-TV',
        color: 'red',
    },
    {
        type: dev.type.curtain, //窗帘
        iconType: 'al-icon',
        icon: 'icon-curtain',
        color: 'green',
    },
    {
        type: dev.type.doorLock, //门磁
        iconType: 'al-icon',
        icon: 'icon-door-ring',
        color: 'red',
    },
    {
        type: dev.type.tvBox, //音响
        iconType: 'al-icon',
        icon: 'icon-soundbox',
        color: 'red',
    },
    {
        type: dev.type.air, //空调
        iconType: 'al-icon',
        icon: 'icon-kongdiao',
        color: 'green',
    }
]

const DevList = RC({
    render(){
        let list = this.props.hasList == 'no' ? <NoData data={{span_text:'还没有设备状态哦~'}}/> :
            this.props.data.map((data, index) => {
                return (
                    <DevInfo key={index} data={data}/>
                )
            })

        return (
            <div className="dev-list">
                {list}
            </div>
        )
    }
})

const DevInfo = RC({
    render(){
        let data = this.props.data,
            type = data.deviceType,
            iconInfo = '';

        for (let i = 0; i < itemIcon.length; i++) {
            if (type == itemIcon[i].type) {
                iconInfo = {
                    iconType: itemIcon[i].iconType,
                    icon: itemIcon[i].icon,
                    color: itemIcon[i].color,
                };
                break;
            }
        }

        return (
            <div className="mui-table-view-cell flex">
                <i className={'item dev-icon ' + iconInfo.iconType + ' '
                              + iconInfo.icon + ' ' + iconInfo.color}/>
                <div className="dev-name">{data.deviceName}</div>
                <p className={'state ' + (data.status == '1' ? 'open' : '')}>
                    {data.status == 0 ? '关' : '开'}</p>
            </div>
        )
    }
})

const Root = RC({
    getInitialState(){
        return ({
            info: '',
            data: [],
            hasList: '',
            newUser: '',
        })
    },
    componentWillMount(){
        let me = this,
            user = me.props.user;
        if (user.userId) {
            this.getHouserInfo(user);
        } else {
            me.setState({
                newUser: true,
            })
            console.log('尚未绑定到家庭哦!');
        }
    },
    //获取houseNum
    getHouserInfo(user){
        ajax({
            type: "get",
            data: {
                globalId: user.globalId
            },
        }, lf.finger.api.household.getHouseList, data => {

            for (let i = 0; i < data.length; i++) {
                if (data[i].houseId == this.props.user.houseId) {
                    this.setState({
                        info: {
                            houseNum: data[i].houseNum,
                            projectName: data[i].projectName,
                            projectId: data[i].projectId
                        }
                    })
                    this.queryDevicesStatusByHouse(this.state.info);
                    break;
                }
            }
        });
    },
    //获取设备列表
    queryDevicesStatusByHouse(data){
        
        ajax({
            type: 'get',
            url: apiUrl + api.loadFamily,
            data: {
                projectId: data.projectId || '',
                houseNum: data.houseNum || '',
            },
        }, null, (data) => {
            if (!data) {
                this.setState({
                    hasList: 'no',
                })
            } else {
                ajax({
                    type: 'get',
                    url: apiUrl + api.queryDevicesStatusByHouse,
                    data: {
                        familyId: data.id || '',
                    },
                }, null, (data) => {
                    this.setState({
                        data: data,
                        hasList: data.length ? 'more' : 'no',
                    })
                })
            }
        })
    },

    render(){
        let info = this.state.info;
        if (this.state.newUser) {
            return <NoData data={{span_text:'还没有设备状态哦~'}}/>
        } else {
            return (
                <div className="dev-state">
                    <div className="header">
                        <p className="name">
                            <span className="project-name">{info.projectName}</span>
                            <span className="home-num">{info.houseNum}</span>
                        </p>
                    </div>
                    <DevList data={this.state.data} hasList={this.state.hasList}/>
                </div>
            )
        }
    }
})


lf.appJs.getUser(function (user) {
    lf.appJs.setTitle('设备状态');
    R.render(
        <PullRefresh data={ <Root user={user}/>}/>,
        document.getElementById('root'), function () {
            $('.mui-scroll').css('background-color', '#ededed');
        }
    );
});
